<template>
  <div class="hello">
    <pre>
      interface只能定义对象数据结构类型。
      type侧重于直接定义类型

      type 可用于 string、number、bool、undefined、null，而 interface 只能描述对象（含数组、函数、包装对象、元组）
      type 还可以给一个或多个类型起一个新名称(当变量用)
      type当然也能定义对象类型
      同：
      相同1：type 和 interface都支持扩展
        type & 扩展， interface extends 扩展
      区别：
      区别1: type 可以为基本类型，联合类型 或 元组 甚至any等等 赋值定义别名,interface 明显办不到
      区别2: interface 定义重名了会合并属性，type 办不到(会报错提醒 重复定义)

      使用场景
      type 的一般使用场景
      一般定义基本或联合类型
      一般定义元组类型
      一般定义函数类型
      定义映射类型
      interface 的使用场景
      需要interface 重名会自动合并属性扩展的
      定义对象数据结构(不使用type时)
      总结
      除了使用场景区别，type 声明的算是类型别名，而 interface 声明的是一个新类型。
    </pre>
    <h3>泛型函数返回值：{{  func(123) }}</h3>
    <div>接口定义的user：{{ user1 }}</div>
    <div>type定义的user：{{ user2 }}</div>
  </div>
</template>

<script lang="ts">

interface Generics<T> {
  (arg: T) : T
}

interface User {
  name: string,
  age: number
}

// 可以声明合并，但是eslint报错
/* interface User {
  age: number
}
*/
type UserType = string

const func: Generics<number> = (arg: number) => {
  return arg + 1
}
import { Options, Vue } from 'vue-class-component';

@Options({
  props: {
    msg: String
  }
})
export default class HelloWorld extends Vue {
  msg!: string;
  num = 6;
  func = func;
  user1: User = {
    name: 'wanghaha',
    age: 18
  };
  user2: UserType = '王';
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
</style>
